<template>
  <div class="jdt" :style="{height:`${height}px`}">
    <div
      class="jdt-bar"
      :style="{
        background: ` linear-gradient(to right,${color.join(',')})`,
        animationDuration: `${duration}s`,
      }"
    ></div>
  </div>
</template>
<script setup lang="ts">
import { defineProps } from "vue";
defineProps({
  duration: {
    type: Number,
    default: 3,
  },
  color: {
    type: Array,
    default: ["#05f5f500", "#00bfff50", "#00bfff"],
  },
  height:{
    type:Number,
    default:10
  }
});
</script>
<style scoped>
.jdt {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background-color: rgba(5, 245, 245, 0.2);
}
.jdt-bar {
  width: 0%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #05f5f500, #00bfff50, #00bfff);
  /* transition: width 0.5s ease-in-out; */
  animation-name: bounce;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
</style>
